<template>
  <div class="chat_box_5">
    <dv-border-box-7 :color="['#2EC8ED', '#2EC8ED']">
      <dv-loading v-if="loading" />
      <template v-else>
        <title-box title="统计" />
        <div class="chat_box_content flex-x-center flex-content-around">
          <div class="number_1 flex-x-center flex-column">
            <span class="text_1">人/年</span>
            <span class="text_2">{{ articleNum }}</span>
            <span class="text_3">xxx总数</span>
          </div>
          <div class="number_2 flex-x-center flex-column">
            <span class="text_1">人/年</span>
            <span class="text_2">{{ userNum }}</span>
            <span class="text_3">xxx总数</span>
          </div>
          <div class="number_3 flex-x-center flex-column">
            <span class="text_1">人/年</span>
            <span class="text_2">{{ userAgreeNum }}</span>
            <span class="text_3">xxx总数</span>
          </div>
        </div>
      </template>
    </dv-border-box-7>
  </div>
</template>

<script>
import TitleBox from "./title_box.vue";
export default {
  components: { TitleBox },

  data() {
    return {
      loading: false,
      articleNum: 1234,
      userNum: 3234,
      userAgreeNum: 1233,
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      // try {
      //   this.loading = true;
      //   const { data } = await reqChartData5();
      //   this.articleNum = data.article_num;
      //   this.userNum = data.user_num;
      //   this.userAgreeNum = data.user_agree_num;
      //   this.loading = false;
      // } catch (error) {
      //   this.loading = false;
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.chat_box_5 {
  z-index: 99;
  position: absolute;

  box-sizing: border-box;
  padding: 10px;

  position: absolute;
  right: 2vw;
  top: 7vh;
  width: 28%;
  height: 22vh;

  .chat_box_content {
    width: 100%;
    display: flex;
    height: calc(22vh - 7vh);
    .chat_box_item {
      height: 100%;
    }
  }

  .number_1 {
    color: #80e6ff;
    background-image: url("@/assets/icons/img_green.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .number_2 {
    color: #669dff;
    background-image: url("@/assets/icons/img_blue.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .number_3 {
    color: #ffba69;
    background-image: url("@/assets/icons/img_yellow.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .text_1 {
    font-size: 0.4vw;
  }
  .text_2 {
    margin-top: 1vh;
    font-size: 1.4vw;
  }
  .text_3 {
    margin-top: 1vh;
    color: white;
    font-size: 0.4vw;
  }
}
</style>
